<%@ page import="com.xlro.service.UserService" %>
<%@ page import="com.xlro.domain.User" %>
<%@ page import="java.util.ArrayList" %>
<%--
  Created by IntelliJ IDEA.
  User: xlro
  Date: 2021/5/30
  Time: 12:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <style>
        #top-image {
            background: linear-gradient(
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2)
            ), url('jQuery/images/1.jpg') no-repeat fixed;
            position:fixed ;
            top:0;
            width:100%;
            z-index:0;
            height:100%;
        }

        html,body{
            margin-top: 50px;
            margin-bottom: -100px;
            width: 100%;
            height: 100%;
            background: rgba(204,142,103, 0.3);
        }
    </style>
</head>
<body>


<div id="top-image">
<table class="layui-table" lay-data="{height:400,  page:true, id:'test'}" lay-filter="test">

    <thead>
    <tr>
        <th lay-data="{field:'id',sort: false}">用户ID</th>
        <th lay-data="{field:'name',sort: true}">用户名</th>
        <th lay-data="{field:'control'}">操作</th>
    </tr>
    </thead>

    <tbody>
    <%
        UserService userService = new UserService();
        ArrayList<User> users = userService.getAll();
        request.setAttribute("users",users);
    %>


    <div class="layui-card">
        <%
            for (int i = 0; i < users.size(); i++) {
                User user = users.get(i);
        %>
            <tr>
                <td><%=user.getId()%></td>
                <td><%=user.getUsername()%></td>
                <td>
                    <div class="layui-btn-group">
                        <button name='btn1' id='<%=user.getId()%>' title="《<%=user.getId()%>》" type="button" class="layui-btn">禁用</button>
                        <button name='btn2'  id='<%=user.getId()%>' type="button" class="layui-btn">删除</button>
                    </div>
                </td>
            </tr>
            <% } %>
    </div>

    </tbody>
</table>
</div>


<script src="layui/layui.js"></script>
<script src="jQuery/js/jquery-1.11.0.min.js"></script>
<script src="jQuery/js/ios-parallax.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#top-image').iosParallax({
            movementFactor: 500,
            dampenFactor: 100
        });
    });
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;


        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '/demo/table/user/' //数据接口
            ,page: true //开启分页
        });


        var element = layui.element;
        var $ = layui.$;

        $("[name=btn1]").click(function () {
            var layer = layui.layer;

            var id = $(this).attr("id");
            var title = $(this).attr("title");


            //iframe窗
            layer.open({
                type: 2,
                title: title,
                closeBtn: 1, //不显示关闭按钮
                maxmin: true, //开启最大化最小化按钮
                // shade: [0],
                shadeClose: true,
                shade: false,
                area: ['24%', '9%'],
                offset: 'rt', //弹出
                time: 1000,
                anim: 2,
                content: ['./alterUserStatus.jsp?id='+id, 'no']
            });

        })


        $("[name=btn2]").click(function () {
            var id = $(this).attr("id");

            //iframe窗
            layer.open({
                type: 2,
                title: false,
                closeBtn: 0, //不显示关闭按钮
                maxmin: false, //开启最大化最小化按钮
                shade: [0],
                shadeClose: true,
                shade: false,
                area: ['24%', '9%'],
                offset: 'rt', //弹出
                time: 1000,
                anim: 2,
                content: ['./deleteUser.jsp?id='+id, 'no']
            });
        })

    });
</script>
</body>
</html>
